<template>
	<div class="app-statistics">
		<div class="clear-button">
			<el-button type="danger" @click="dialogVisible = true"
				>清空统计次数</el-button
			>
		</div>
		<p>全局准确率统计</p>
		<el-table border :data="tableData" style="width: 100%;">
			<el-table-column
				property="rightTotal"
				label="总正确次数"
				align="center"
			/>
			<el-table-column
				property="errorTotal"
				label="总错误次数"
				align="center"
			/>

			<el-table-column
				v-if="width > 768"
				property="totalCount"
				label="所有次数"
				align="center"
			/>
			<el-table-column property="rateTotal" label="总正确率" align="center" />
		</el-table>
		<el-divider></el-divider>
		<p>单个卡片精确统计</p>
		<el-table border :data="validKana" style="width: 100%;">
			<el-table-column property="hiragana" label="平假名" align="center" />
			<el-table-column property="katakana" label="片假名" align="center" />
			<el-table-column property="romanji" label="罗马字" align="center" />
			<el-table-column property="rightTimes" label="正确次数" align="center" />
			<el-table-column property="errorTimes" label="错误次数" align="center" />
			<el-table-column property="rate" label="正确率" align="center" />
		</el-table>
	</div>

	<el-dialog v-model="dialogVisible" title="警告" width="30%">
		<span>清空统计次数将无法撤回，确定继续吗？</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="clearStatistics">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { ElTable } from "element-plus";
import { useStore } from "../store/app";
import { makePercentage } from "@/utils/float";
import { useWindow } from "@/utils/useWindow";

const {
	kana,
	rightCount,
	errorCount,
	clearErrorCount,
	clearRightCount,
} = useStore();

const { width } = useWindow();

const dialogVisible = ref(false);

const rightTotal = computed(() => {
	let sum = 0;

	for (const v of Object.values(rightCount)) {
		sum += v;
	}

	return sum;
});

const rateTotal = computed(() => {
	if (rightTotal.value + errorTotal.value <= 0) {
		return makePercentage(0);
	}

	const v = rightTotal.value / (rightTotal.value + errorTotal.value);
	return makePercentage(v);
});

const tableData = computed(() => [
	{
		rightTotal,
		errorTotal,
		totalCount: rightTotal.value + errorTotal.value,
		rateTotal,
	},
]);

const errorTotal = computed(() => {
	let sum = 0;

	for (const v of Object.values(errorCount)) {
		sum += v;
	}

	return sum;
});

const validKana = computed(() => {
	return kana
		.filter((e) => e.isValid())
		.map((e) => {
			const v = e.value();
			const index = v.index;
			let rate = 0;

			const rightTimes = rightCount[index] || 0;
			const errorTimes = errorCount[index] || 0;

			if (errorTimes + rightTimes > 0) {
				rate = rightTimes / (errorTimes + rightTimes);
			}

			return { ...v, rightTimes, errorTimes, rate };
		})
		.sort((a, b) => b.rate - a.rate)
		.map((e) => ({ ...e, rate: makePercentage(e.rate) }));
});

function clearStatistics() {
	dialogVisible.value = false;
	clearErrorCount();
	clearRightCount();
	window.location.reload();
}
</script>

<style>
.clear-button {
	margin: 10px 0px;
}
</style>
